<template>
    <div class="change">
      <div class="operation">
        <div>增加人员</div>
        <div>
          <span @click="add">保存</span>
          <span @click="jump">返回</span>
        </div>
      </div>
      <div class="inputbox">
        <div class="right">
          <div>
            姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 名：<input
              type="text"
              placeholder="请输入姓名"
              v-model="addname"
            />
          </div>
          <div>
            工 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 作：<input
              type="text"
              v-model="addjob"
            />
          </div>
          <div>
            电 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 话：<input
              type="text"
              v-model="addphone"
            />
          </div>
          <div>
            学 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 历：<input
              type="text"
              v-model="addeducations"
            />
          </div>
          <div>信息来源：<input type="text" v-model="addfrom" /></div>
          <div>面试反馈：<input type="text" v-model="addstatus" /></div>
          <div>人员状态：<input type="text" v-model="addpeoplestatus" /></div>
          <div>电子邮件：<input type="text" v-model="addemail" /></div>
          <div>毕业学校：<input type="text" v-model="addschool" /></div>
        </div>
        <div class="left">
          <div class="prevjob">上家公司就职情况：</div>
          <div>工作时间：<input type="text" v-model="addjobTime" /></div>
          <div>工作单位：<input type="text" v-model="addjobaddress" /></div>
          <div>主要内容：<input type="text" v-model="addjobcont" /></div>
          <div>
            薪 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 资：<input
              type="text"
              v-model="addmoney"
            />
          </div>
          <div>离职原因：<input type="text" v-model="addreason" /></div>
        </div>
      </div>
    </div>
  </template>
  
  <script  setup>
  import axios from "axios";
  import { reactive, ref } from "@vue/reactivity";
  import { useRoute, useRouter } from "vue-router";
  var route = useRoute();
  var router = useRouter();
  var addname = ref("");
  var addjob = ref("");
  var addphone = ref();
  var addeducations = ref("");
  var addfrom = ref("");
  var addstatus = ref("");
  var addpeoplestatus = ref("");
  var addemail = ref("");
  var addschool = ref("");
  var addjobTime = ref("");
  var addjobaddress = ref("");
  var addjobcont = ref("");
  var addmoney = ref("");
  var addreason = ref("");
  var jump = () => {
    router.push("/index/goodPerson");
  };
  const tableData = [
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles",
    },
  ];
  var add = () => {
    if (addreason.value == false) {
      alert("请输入信息");
    } else {
      axios
        .post("/api/user/add", {
          name: addname.value,
          job: addjob.value,
          phone: addphone.value,
          education: addeducations.value,
          from: addfrom.value,
          status: addstatus.value,
          peopleStatus: addpeoplestatus.value,
          email: addemail.value,
          school: addschool.value,
          jobTime: addjobTime.value,
          jobaddress: addjobaddress.value,
          jobcont: addjobcont.value,
          money: addmoney.value,
          reason: addreason.value,
        })
        .then((res) => {
          alert("添加人员成功");
          router.push("/index/goodPerson");
        });
    }
  };
  </script>
  
  <style scoped>
  .operation {
    height: 50px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
  }
  .operation > div:nth-child(1) {
    line-height: 50px;
    margin-left: 20px;
    font-size: 12px;
  }
  .operation > div:nth-child(2) {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .operation > div > span {
    line-height: 30px;
    font-size: 12px;
    width: 60px;
    height: 30px;
    background-color: white;
    color: #63b9be;
    margin-right: 20px;
    text-align: center;
    cursor: pointer;
  }
  .operation > div > span:hover {
    background-color: #63b9be;
    color: white;
  }
  .inputbox {
    padding: 20px 0 20px 100px;
    font-size: 12px;
    color: #999999;
    display: flex;
    justify-content: space-around;
  }
  input {
    margin: 0 5px;
    margin: 15px 0;
    width: 307px;
    height: 40px;
    box-shadow: none;
    border: 1px solid #999999;
  }
  .box {
    display: flex;
    justify-content: center;
  }
  .bottom {
    margin: 30px 20px;
  }
  .experience {
    margin: 10px 0px;
  }
  .prevjob {
    /* width: 100%; */
    height: 40px;
    color: #63b9be;
    font-size: 18px;
    font-weight: bold;
    /* color: rebeccapurple; */
  }
  </style>